<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>爪爪温泉猫咖 - 治愈你的午后时光</title>
  <!-- 确保CDN资源稳定加载 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script>
    // 简化Tailwind配置，确保兼容性
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#E8B96F',
            secondary: '#F9F2E7',
            accent: '#D4A373',
            dark: '#6B5646',
          },
          fontFamily: {
            cute: ['"Microsoft YaHei"', '"PingFang SC"', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style>
    /* 简化自定义样式，移除可能不兼容的特性 */
    .content-auto {
      content-visibility: auto;
    }
    .paw-pattern {
      background-image: radial-gradient(#E8B96F33 20%, transparent 20%),
                        radial-gradient(#E8B96F33 20%, transparent 20%);
      background-position: 0 0, 20px 20px;
      background-size: 40px 40px;
    }
    .text-shadow {
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(212, 163, 115, 0.3);
    }
    /* 确保平滑滚动兼容 */
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body class="bg-secondary text-dark font-cute">
  <!-- 导航栏 -->
  <nav id="navbar" class="fixed w-full z-50 bg-secondary/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-paw text-primary text-2xl"></i>
        <span class="text-xl md:text-2xl font-bold">爪爪温泉猫咖</span>
      </div>
      
      <!-- 桌面导航 -->
      <div class="hidden md:flex space-x-8">
        <a href="#home" class="hover:text-primary transition-colors">首页</a>
        <a href="#about" class="hover:text-primary transition-colors">关于我们</a>
        <a href="#cats" class="hover:text-primary transition-colors">猫咪家族</a>
        <a href="#menu" class="hover:text-primary transition-colors">饮品菜单</a>
        <a href="#contact" class="hover:text-primary transition-colors">联系我们</a>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button id="menuBtn" class="md:hidden text-dark focus:outline-none">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white shadow-md absolute w-full">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="#home" class="hover:text-primary transition-colors py-2">首页</a>
        <a href="#about" class="hover:text-primary transition-colors py-2">关于我们</a>
        <a href="#cats" class="hover:text-primary transition-colors py-2">猫咪家族</a>
        <a href="#menu" class="hover:text-primary transition-colors py-2">饮品菜单</a>
        <a href="#contact" class="hover:text-primary transition-colors py-2">联系我们</a>
      </div>
    </div>
  </nav>

  <!-- 英雄区域 - 替换为稳定的图片链接 -->
  <section id="home" class="pt-24 md:pt-32 pb-16 md:pb-24 paw-pattern">
    <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
      <div class="md:w-1/2 mb-10 md:mb-0 text-center md:text-left">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-shadow">
          爪爪温泉猫咖
        </h1>
        <p class="text-lg md:text-xl mb-8 max-w-lg mx-auto md:mx-0">
          —— 在这里，时间变得柔软，心情被毛茸茸包裹
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
          <a href="#contact" class="bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-full transition-all shadow-md hover:shadow-lg">
            预约光临
          </a>
          <a href="#cats" class="bg-white hover:bg-gray-100 text-dark py-3 px-8 rounded-full transition-all shadow-md hover:shadow-lg border border-primary/30">
            认识猫咪
          </a>
        </div>
      </div>
      <div class="md:w-1/2 relative">
        <div class="w-full h-[300px] md:h-[400px] rounded-3xl overflow-hidden shadow-2xl">
          <!-- 替换为稳定的占位图 -->
          <img src="https://www.imgur.la/images/2025/11/26/dc9aa84ff20ad6ca4b0e469c674759be.jpg" alt="猫咪在猫咖玩耍（封面）" border="0">
        </div>
        <div class="absolute -bottom-6 -left-6 bg-white p-3 rounded-full shadow-lg hidden md:block">
          <i class="fa fa-clock-o text-primary text-xl"></i>
          <span class="ml-2">周二至周日 10:30-20:00</span>
        </div>
      </div>
    </div>
  </section>

  <!-- 关于我们 -->
  <section id="about" class="py-16 md:py-24 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">关于爪爪温泉猫咖</h2>
        <div class="w-20 h-1 bg-primary mx-auto"></div>
      </div>
      
      <div class="flex flex-col md:flex-row items-center gap-10">
        <div class="md:w-1/2">
          <div class="relative">
            <!-- 替换为稳定的占位图 -->
            <img src="https://www.imgur.la/images/2025/11/26/49a9280c94c21db63d284fa6f71b8269.jpg" alt="猫咖环境" border="0">
            <div class="absolute -bottom-5 -right-5 bg-primary text-white p-4 rounded-xl shadow-lg">
              <p class="font-bold">主理人：李朵朵</p>
              <p>首席铲屎官</p>
            </div>
          </div>
        </div>
        
        <div class="md:w-1/2">
          <h3 class="text-2xl font-bold mb-4">我们的故事与理念</h3>
          <p class="mb-4 text-lg">嗨，我们是「爪爪温泉猫咖」，这里不只是一家咖啡馆，更是一个为都市人准备的“心灵温泉”。“温泉”象征着被温暖和舒适包围的感觉。我们相信，当指尖触碰到猫咪柔软的毛发，当耳边响起它们满足的呼噜声，所有的疲惫和压力都会像浸入温泉一样，慢慢消散。</p>
          <p class="mb-6 text-lg">我们的使命，就是为你提供一个可以暂时逃离喧嚣、充电放松的“第三空间”。在这里，每一只猫咪都是治愈你的“温泉精灵”，每一杯饮品都饱含着我们的用心。</p>
          
          <div class="grid grid-cols-2 gap-6">
            <div class="flex items-start">
              <div class="bg-primary/10 p-3 rounded-full mr-4">
                <i class="fa fa-heart text-primary text-xl"></i>
              </div>
              <div>
                <h4 class="font-bold text-lg mb-1">猫咪友好</h4>
                <p>所有猫咪均健康温顺</p>
              </div>
            </div>
            <div class="flex items-start">
              <div class="bg-primary/10 p-3 rounded-full mr-4">
                <i class="fa fa-coffee text-primary text-xl"></i>
              </div>
              <div>
                <h4 class="font-bold text-lg mb-1">精品饮品</h4>
                <p>严选原料匠心制作</p>
              </div>
            </div>
            <div class="flex items-start">
              <div class="bg-primary/10 p-3 rounded-full mr-4">
                <i class="fa fa-leaf text-primary text-xl"></i>
              </div>
              <div>
                <h4 class="font-bold text-lg mb-1">干净环境</h4>
                <p>每日消毒保持整洁</p>
              </div>
            </div>
            <div class="flex items-start">
              <div class="bg-primary/10 p-3 rounded-full mr-4">
                <i class="fa fa-gift text-primary text-xl"></i>
              </div>
              <div>
                <h4 class="font-bold text-lg mb-1">猫咪周边</h4>
                <p>可爱文创商品</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 猫咪家族 -->
  <section id="cats" class="py-16 md:py-24 bg-secondary">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">猫咪家族成员</h2>
        <p class="text-lg max-w-2xl mx-auto">认识我们可爱的明星店员们，每一只都有自己独特的性格和故事</p>
        <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
      </div>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 猫咪1 -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-lg card-hover">
          <div class="h-64 overflow-hidden">
            <img src="https://www.imgur.la/images/2025/11/26/-.png" alt="大橘猫 奶糖" border="0">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center mb-3">
              <h3 class="text-xl font-bold">奶糖</h3>
              <span class="bg-primary/20 text-dark px-3 py-1 rounded-full text-sm">3岁 · 公猫</span>
            </div>
            <p>性格温顺亲人的橘猫，喜欢被抚摸，是店里的人气王。特别喜欢睡在阳光充足的地方。</p>
            <div class="mt-4 flex items-center text-sm text-gray-600">
              <span class="mr-4"><i class="fa fa-star text-primary mr-1"></i> 温顺指数：★★★★★</span>
              <span><i class="fa fa-gamepad text-primary mr-1"></i> 活跃指数：★★★☆☆</span>
            </div>
          </div>
        </div>
        
        <!-- 猫咪2 -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-lg card-hover">
          <div class="h-64 overflow-hidden">
            <img src="https://www.imgur.la/images/2025/11/26/-f6e54291d5ab5f37.png" alt="布偶猫 绵绵" border="0">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center mb-3">
              <h3 class="text-xl font-bold">绵绵</h3>
              <span class="bg-primary/20 text-dark px-3 py-1 rounded-full text-sm">2岁 · 母猫</span>
            </div>
            <p>优雅的布偶猫，毛发柔软，喜欢安静地待在客人身边。对新环境适应能力强。</p>
            <div class="mt-4 flex items-center text-sm text-gray-600">
              <span class="mr-4"><i class="fa fa-star text-primary mr-1"></i> 温顺指数：★★★★☆</span>
              <span><i class="fa fa-gamepad text-primary mr-1"></i> 活跃指数：★★☆☆☆</span>
            </div>
          </div>
        </div>
        
        <!-- 猫咪3 -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-lg card-hover">
          <div class="h-64 overflow-hidden">
            <img src="https://www.imgur.la/images/2025/11/26/-6f255ca87b3ca46c.png" alt="英短猫 灰灰" border="0">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center mb-3">
              <h3 class="text-xl font-bold">灰灰</h3>
              <span class="bg-primary/20 text-dark px-3 py-1 rounded-full text-sm">1.5岁 · 公猫</span>
            </div>
            <p>活泼好动的英短猫，喜欢玩逗猫棒，对一切新鲜事物充满好奇，是店里的开心果。</p>
            <div class="mt-4 flex items-center text-sm text-gray-600">
              <span class="mr-4"><i class="fa fa-star text-primary mr-1"></i> 温顺指数：★★★☆☆</span>
              <span><i class="fa fa-gamepad text-primary mr-1"></i> 活跃指数：★★★★★</span>
            </div>
          </div>
        </div>
        
        <!-- 猫咪4 -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-lg card-hover">
          <div class="h-64 overflow-hidden">
            <img src="https://www.imgur.la/images/2025/11/26/-0981d420e49c7ba5.png" alt="三花猫 花花" border="0">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center mb-3">
              <h3 class="text-xl font-bold">花花</h3>
              <span class="bg-primary/20 text-dark px-3 py-1 rounded-full text-sm">2.5岁 · 母猫</span>
            </div>
            <p>安静独立的三花猫，喜欢观察周围，偶尔会主动亲近熟悉的客人，非常有灵性。</p>
            <div class="mt-4 flex items-center text-sm text-gray-600">
              <span class="mr-4"><i class="fa fa-star text-primary mr-1"></i> 温顺指数：★★★★☆</span>
              <span><i class="fa fa-gamepad text-primary mr-1"></i> 活跃指数：★★☆☆☆</span>
            </div>
          </div>
        </div>
        
        <!-- 猫咪5 -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-lg card-hover">
          <div class="h-64 overflow-hidden">
            <img src="https://www.imgur.la/images/2025/11/26/-2efb024c9837b49f.png" alt="奶牛猫 墨墨" border="0">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center mb-3">
              <h3 class="text-xl font-bold">墨墨</h3>
              <span class="bg-primary/20 text-dark px-3 py-1 rounded-full text-sm">2岁 · 公猫</span>
            </div>
            <p>聪明伶俐的奶牛猫，会开门会开抽屉，非常调皮但也很亲人，深受小朋友喜爱。</p>
            <div class="mt-4 flex items-center text-sm text-gray-600">
              <span class="mr-4"><i class="fa fa-star text-primary mr-1"></i> 温顺指数：★★★☆☆</span>
              <span><i class="fa fa-gamepad text-primary mr-1"></i> 活跃指数：★★★★☆</span>
            </div>
          </div>
        </div>
        
        <!-- 猫咪6 -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-lg card-hover">
          <div class="h-64 overflow-hidden">
            <img src="https://www.imgur.la/images/2025/11/26/-437a75111a58dcbb.png" alt="暹逻猫 布丁" border="0">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center mb-3">
              <h3 class="text-xl font-bold">布丁</h3>
              <span class="bg-primary/20 text-dark px-3 py-1 rounded-full text-sm">3岁 · 母猫</span>
            </div>
            <p>粘人的暹逻猫，喜欢跟在人身边，会发出温柔的叫声，是店里的"小跟屁虫"。</p>
            <div class="mt-4 flex items-center text-sm text-gray-600">
              <span class="mr-4"><i class="fa fa-star text-primary mr-1"></i> 温顺指数：★★★★★</span>
              <span><i class="fa fa-gamepad text-primary mr-1"></i> 活跃指数：★★★☆☆</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="text-center mt-12">
        <a href="#contact" class="inline-block bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-full transition-all shadow-md hover:shadow-lg">
          来店与猫咪互动
        </a>
      </div>
    </div>
  </section>

  <!-- 饮品菜单 -->
  <section id="menu" class="py-16 md:py-24 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">饮品与小食</h2>
        <p class="text-lg max-w-2xl mx-auto">在与猫咪玩耍的同时，享受我们精心准备的饮品和小食</p>
        <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- 咖啡类 -->
        <div>
          <h3 class="text-2xl font-bold mb-6 flex items-center">
            <i class="fa fa-coffee text-primary mr-3"></i> 咖啡系列
          </h3>
          
          <div class="space-y-6">
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">爪爪拿铁</h4>
                <p class="text-gray-600">特色拉花拿铁，可选牛奶种类</p>
              </div>
              <span class="text-lg">¥32</span>
            </div>
            
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">猫咪美式</h4>
                <p class="text-gray-600">精选咖啡豆，口感醇厚</p>
              </div>
              <span class="text-lg">¥28</span>
            </div>
            
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">焦糖玛奇朵</h4>
                <p class="text-gray-600">香甜焦糖与浓缩咖啡的完美结合</p>
              </div>
              <span class="text-lg">¥36</span>
            </div>
            
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">卡布奇诺</h4>
                <p class="text-gray-600">经典意式咖啡，奶泡细腻</p>
              </div>
              <span class="text-lg">¥30</span>
            </div>
            
            <div class="flex justify-between items-center">
              <div>
                <h4 class="text-xl font-bold">猫咪爪布奇诺</h4>
                <p class="text-gray-600">无咖啡因，专为猫咪准备的奶泡</p>
              </div>
              <span class="text-lg">¥15</span>
            </div>
          </div>
        </div>
        
        <!-- 饮品与小食 -->
        <div>
          <h3 class="text-2xl font-bold mb-6 flex items-center">
            <i class="fa fa-lemon-o text-primary mr-3"></i> 饮品与小食
          </h3>
          
          <div class="space-y-6">
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">水果气泡水</h4>
                <p class="text-gray-600">新鲜水果与气泡水的清爽组合</p>
              </div>
              <span class="text-lg">¥26</span>
            </div>
            
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">猫咪曲奇</h4>
                <p class="text-gray-600">猫咪形状的黄油曲奇，酥脆可口</p>
              </div>
              <span class="text-lg">¥18</span>
            </div>
            
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">芝士蛋糕</h4>
                <p class="text-gray-600">浓郁丝滑的经典芝士蛋糕</p>
              </div>
              <span class="text-lg">¥32</span>
            </div>
            
            <div class="flex justify-between items-center pb-4 border-b border-gray-100">
              <div>
                <h4 class="text-xl font-bold">猫咪套餐</h4>
                <p class="text-gray-600">任意饮品+小食，赠送猫咪零食一份</p>
              </div>
              <span class="text-lg">¥58</span>
            </div>
            
            <div class="flex justify-between items-center">
              <div>
                <h4 class="text-xl font-bold">撸猫体验券</h4>
                <p class="text-gray-600">含饮品一杯，全天不限时撸猫</p>
              </div>
              <span class="text-lg">¥88</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 客户评价 -->
  <section class="py-16 md:py-24 bg-secondary">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">客人们的评价</h2>
        <p class="text-lg max-w-2xl mx-auto">看看来过的朋友们怎么说</p>
        <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 评价1 -->
        <div class="bg-white p-8 rounded-2xl shadow-lg card-hover">
          <div class="flex items-center mb-4">
            <img src="https://www.imgur.la/images/2025/11/26/11bd4359b4418a4a7.jpg" alt="头像1" border="0" class="w-12 h-12 rounded-full object-cover">
            <div class="ml-4">
              <h4 class="font-bold">张小姐</h4>
              <div class="text-primary">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
            </div>
          </div>
          <p>"猫咪都超级可爱，环境也很干净，完全没有异味。大橘太亲人了，一直趴在我腿上睡觉，治愈了我一周的疲惫。"</p>
        </div>
        
        <!-- 评价2 -->
        <div class="bg-white p-8 rounded-2xl shadow-lg card-hover">
          <div class="flex items-center mb-4">
            <img src="https://www.imgur.la/images/2025/11/26/2.jpg" alt="头像2" border="0" class="w-12 h-12 rounded-full object-cover">
            <div class="ml-4">
              <h4 class="font-bold">李先生</h4>
              <div class="text-primary">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
              </div>
            </div>
          </div>
          <p>"带孩子来的，他非常开心。店员很有耐心地介绍每只猫咪的性格，还给了一些和猫咪互动的小技巧。饮品也很好喝。"</p>
        </div>
        
        <!-- 评价3 -->
        <div class="bg-white p-8 rounded-2xl shadow-lg card-hover">
          <div class="flex items-center mb-4">
            <img src="https://www.imgur.la/images/2025/11/26/3.jpg" alt="头像3" border="0" class="w-12 h-12 rounded-full object-cover">
            <div class="ml-4">
              <h4 class="font-bold">王女士</h4>
              <div class="text-primary">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
            </div>
          </div>
          <p>"作为一个猫奴，这里简直是天堂！每只猫咪都被照顾得很好，非常健康活泼。已经是第三次来了，每次都有新体验。"</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 联系我们 -->
  <section id="contact" class="py-16 md:py-24 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">联系我们</h2>
        <p class="text-lg max-w-2xl mx-auto">欢迎随时联系我们，预约或咨询相关事宜</p>
        <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
      </div>
      
      <div class="flex flex-col lg:flex-row gap-10">
        <div class="lg:w-1/2">
          <div class="bg-secondary p-8 rounded-2xl h-full">
            <h3 class="text-2xl font-bold mb-6">联系方式</h3>
            
            <div class="space-y-6">
              <div class="flex items-start">
                <div class="bg-primary/20 p-3 rounded-full mr-4">
                  <i class="fa fa-map-marker text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-bold text-lg mb-1">地址</h4>
                  <p>定西市陇西县幸福路萌萌街5号</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="bg-primary/20 p-3 rounded-full mr-4">
                  <i class="fa fa-phone text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-bold text-lg mb-1">电话</h4>
                  <p>0932-8888-888</p>
                  <p>13066668888</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="bg-primary/20 p-3 rounded-full mr-4">
                  <i class="fa fa-weixin text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-bold text-lg mb-1">微信</h4>
                  <p>zhuazhuawenquan888</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="bg-primary/20 p-3 rounded-full mr-4">
                  <i class="fa fa-envelope text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-bold text-lg mb-1">邮箱</h4>
                  <p>zhuazhuamao@163.com</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="bg-primary/20 p-3 rounded-full mr-4">
                  <i class="fa fa-clock-o text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-bold text-lg mb-1">营业时间</h4>
                  <p>周二至周日 10:30 - 20:00</p>
                  <p>周一休息</p>
                </div>
              </div>
            </div>
            
            <div class="mt-8">
              <h4 class="font-bold text-lg mb-4">关注我们</h4>
              <div class="flex space-x-4">
                <a href="#" class="bg-primary/20 hover:bg-primary/40 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                  <i class="fa fa-weibo"></i>
                </a>
                <a href="#" class="bg-primary/20 hover:bg-primary/40 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                  <i class="fa fa-weixin"></i>
                </a>
                <a href="#" class="bg-primary/20 hover:bg-primary/40 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                  <i class="fa fa-instagram"></i>
                </a>
                <a href="#" class="bg-primary/20 hover:bg-primary/40 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                  <i class="fa fa-youtube-play"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <div class="lg:w-1/2">
          <div class="bg-secondary p-8 rounded-2xl">
            <h3 class="text-2xl font-bold mb-6">预约光临</h3>
            
            <form>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label for="name" class="block mb-2 font-medium">姓名</label>
                  <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="您的姓名">
                </div>
                <div>
                  <label for="phone" class="block mb-2 font-medium">电话</label>
                  <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="您的联系电话">
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label for="date" class="block mb-2 font-medium">日期</label>
                  <input type="date" id="date" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                </div>
                <div>
                  <label for="time" class="block mb-2 font-medium">时间</label>
                  <input type="time" id="time" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                </div>
              </div>
              
              <div class="mb-6">
                <label for="people" class="block mb-2 font-medium">人数</label>
                <select id="people" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                  <option value="1">1人</option>
                  <option value="2" selected>2人</option>
                  <option value="3">3人</option>
                  <option value="4">4人</option>
                  <option value="5+">5人及以上</option>
                </select>
              </div>
              
              <div class="mb-6">
                <label for="message" class="block mb-2 font-medium">备注信息</label>
                <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="有什么特殊需求请告诉我们"></textarea>
              </div>
              
              <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-lg transition-all shadow-md hover:shadow-lg">
                提交预约
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-paw text-primary text-2xl"></i>
            <span class="text-xl font-bold">爪爪温泉猫咖</span>
          </div>
          <p class="mb-4">与猫咪共度美好时光，治愈你的每一天。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-primary transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-primary transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#home" class="text-gray-300 hover:text-primary transition-colors">首页</a></li>
            <li><a href="#about" class="text-gray-300 hover:text-primary transition-colors">关于我们</a></li>
            <li><a href="#cats" class="text-gray-300 hover:text-primary transition-colors">猫咪家族</a></li>
            <li><a href="#menu" class="text-gray-300 hover:text-primary transition-colors">饮品菜单</a></li>
            <li><a href="#contact" class="text-gray-300 hover:text-primary transition-colors">联系我们</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-4">联系我们</h4>
          <ul class="space-y-2">
            <li class="flex items-center">
              <i class="fa fa-map-marker text-primary mr-2"></i>
              <span>定西市陇西县幸福路萌萌街5号</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone text-primary mr-2"></i>
              <span>0932-8888-888</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-weixin text-primary mr-2"></i>
              <span>zhuazhuawenquan888</span>
            </li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-4">营业时间</h4>
          <ul class="space-y-2">
            <li class="flex justify-between">
              <span>周二至周日</span>
              <span>10:30 - 20:00</span>
            </li>
            <li class="flex justify-between">
              <span>周一</span>
              <span>休息</span>
            </li>
            <li class="flex justify-between">
              <span>法定节假日</span>
              <span>10:00 - 21:00</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 pt-8 text-center text-gray-400">
        <p>&copy; 2025 爪爪温泉猫咖 版权所有 | 主理人：李朵朵（首席铲屎官）</p>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="backToTop" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300">
    <i class="fa fa-arrow-up"></i>
  </button>

  <script>
    // 简化JavaScript代码，确保兼容性
    document.addEventListener('DOMContentLoaded', function() {
      // 移动端菜单切换
      const menuBtn = document.getElementById('menuBtn');
      const mobileMenu = document.getElementById('mobileMenu');
      
      menuBtn.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });
      
      // 导航栏滚动效果
      const navbar = document.getElementById('navbar');
      
      window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
          navbar.classList.add('py-2', 'shadow-md');
          navbar.classList.remove('py-3', 'shadow-sm');
        } else {
          navbar.classList.add('py-3', 'shadow-sm');
          navbar.classList.remove('py-2', 'shadow-md');
        }
      });
      
      // 返回顶部按钮
      const backToTopBtn = document.getElementById('backToTop');
      
      window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
          backToTopBtn.classList.remove('opacity-0', 'invisible');
          backToTopBtn.classList.add('opacity-100', 'visible');
        } else {
          backToTopBtn.classList.add('opacity-0', 'invisible');
          backToTopBtn.classList.remove('opacity-100', 'visible');
        }
      });
      
      backToTopBtn.addEventListener('click', function() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
      
      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
          e.preventDefault();
          
          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
          
          const targetId = this.getAttribute('href');
          const targetElement = document.querySelector(targetId);
          
          if (targetElement) {
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: 'smooth'
            });
          }
        });
      });
    });
  </script>
</body>
</html>
